<script setup lang="ts">
import { ref, shallowRef, reactive, watch, computed } from 'vue';
import { useLargenScreen } from '@/composables/useLargenScreen';
import { hbduiIndex } from '@/common/api/hbExchange';
import headerNavBar from '@/components/headerNavBar.vue';
import confirmDialog from './components/confirmDialog.vue';
import { useToastLoading } from '@/composables/useToastLoading';
import { showToast, showDialog } from 'vant';
import bg1 from '@/assets/images/hbExchange/bg_1.png';
import ico4 from '@/assets/images/platformChart/ico_4.png';
import { BigNumber } from 'bignumber.js';

interface InfoTyep {
  hbprice: number; // 我的红包
  rules: string[]; // 规则列表
  tip2: string; // 兑换比提示
  tip3: string; // 最大兑换数提示
  maxprice: number; // 红包兑换最大值
  hbaward: number; // 已兑换总量
  today_hbaward: number; // 今日兑换量
  yes_hbaward: number; // 昨天兑换量
  rate: number; // 兑换比例
}

// 定义组件引用
const confirmDialogRef = shallowRef<InstanceType<typeof confirmDialog>>();

const [largenScreen] = useLargenScreen();

const price = ref(''); // 兑换数量
const loading = ref(false);
const list = ref<{ crt_time: string; memo: string; price: number }[]>([]);
const info = reactive<InfoTyep>({
  hbprice: 0,
  rules: [],
  tip2: '-',
  tip3: '',
  maxprice: 0,
  hbaward: 0,
  today_hbaward: 0,
  yes_hbaward: 0,
  rate: 0,
});
const errorOption = reactive({
  error: false,
  errorMessage: '',
});

watch(price, () => {
  if (parseFloat(price.value) < 0) {
    errorOption.error = true;
    errorOption.errorMessage = '兑换数量不能小于零';
  } else if (info.maxprice && parseFloat(price.value) > info.maxprice) {
    errorOption.error = true;
    errorOption.errorMessage = info.tip3;
  } else {
    errorOption.error = false;
    errorOption.errorMessage = '';
  }
});

const exchangeNum = computed(() => {
  if (!price.value) return '0';
  const p = new BigNumber(parseFloat(price.value));
  const r = new BigNumber(info.rate);
  return p.div(r).toFixed(3);
});

const onLoad = async () => {
  loading.value = true;
  try {
    const res = await hbduiIndex({});
    if (res.result.data) {
      Object.assign(info, res.result.data);
    }
    if (res.result.list) {
      list.value = res.result.list;
    }
  } catch {
    /** empty */
  } finally {
    loading.value = false;
  }
};
onLoad();
useToastLoading(loading);

// 确认兑换
const handleExchange = () => {
  if (!price.value) {
    return showToast('兑换数量不能为空');
  }
  if (errorOption.error) {
    return;
  }
  confirmDialogRef.value?.open(price.value);
};

// 兑换规则
const openRule = () => {
  if (!info.rules?.length) {
    return showToast('兑换规则为空');
  }
  showDialog({
    title: '兑换规则',
    message: info.rules.join('\n'),
  });
};
</script>
<template>
  <div class="hbExchange" :class="{ boxShadow: largenScreen }">
    <headerNavBar />
    <div
      class="mx-4 my-3 h-[120px] md:h-[150px] bg-[length:100%_100%] bg-no-repeat"
      :style="{ backgroundImage: `url(${bg1})` }"
    >
      <div class="text-white pt-6 pl-5">
        <div class="text-sm mb-2">我的红包</div>
        <div class="text-3xl font-medium">{{ info.hbprice }}</div>
      </div>
    </div>
    <div class="flex justify-between items-center px-4 mb-3">
      <div class="flex flex-col items-center">
        <div class="text-sm text-[#999]">已兑换总量</div>
        <div class="font-medium">{{ info.hbaward }}</div>
      </div>
      <div class="flex flex-col items-center">
        <div class="text-sm text-[#999]">今日已兑换</div>
        <div class="font-medium">{{ info.today_hbaward }}</div>
      </div>
      <div class="flex flex-col items-center">
        <div class="text-sm text-[#999]">昨日已兑换</div>
        <div class="font-medium">{{ info.yes_hbaward }}</div>
      </div>
    </div>
    <div class="flex justify-between items-center px-4">
      <span class="font-medium">{{ info.tip2 }}</span>
      <span class="text-xs text-[#999999]" @click="openRule">兑换规则</span>
    </div>
    <div class="flex py-1 px-3 bg-[#F6F7F8] mx-4 mt-3 rounded-md">
      <div class="flex items-center h-[44px]">
        <van-image width="20" height="20" :src="ico4" />
        <span class="text-sm ml-1">红包</span>
        <div class="w-px h-3 bg-[#D8D8D8] ml-3"></div>
      </div>
      <div class="flex-1">
        <van-field
          v-model="price"
          type="number"
          class="!bg-[transparent]"
          :error="errorOption.error"
          :error-message="errorOption.errorMessage"
          placeholder="请输入兑换数量"
        />
      </div>
    </div>
    <div class="px-3 mt-2 flex justify-between">
      <div class="flex items-center">
        <span class="text-xs text-[#666666]">兑换为积分</span>
        <span class="text-xl text-[#EC2D69] font-medium ml-2">{{ exchangeNum }}</span>
      </div>
      <van-button type="primary" class="w-[94px]" size="small" round color="#EC2D69" @click="handleExchange">
        确认兑换
      </van-button>
    </div>
    <div class="border-t border-[#EEEEEE] mt-4 p-4">
      <div class="flex items-center">
        <div class="w-1 h-[14px] rounded-full bg-[#EC2D69]"></div>
        <div class="font-medium ml-2">兑换明细</div>
      </div>
      <div
        v-for="(item, i) in list"
        :key="i"
        class="flex justify-between items-center border-b border-[#EEEEEE] pb-4 mt-4"
      >
        <div>
          <div class="text-sm">{{ item.memo }}</div>
          <div class="text-xs text-[#AEAEAE] mt-2">{{ item.crt_time }}</div>
        </div>
        <div class="font-medium">{{ item.price }}</div>
      </div>
    </div>
    <van-empty v-if="!list.length && !loading" description="暂无数据" />
    <confirmDialog ref="confirmDialogRef" :exchangeNum="exchangeNum" @on-refresh="onLoad" />
  </div>
</template>
<style lang="less" scoped>
.hbExchange {
  overflow-y: auto;
  background-color: #ffffff;
  min-height: 100vh;
  max-width: 450px;
  padding-bottom: 20px;
}
.hbExchange.boxShadow {
  margin: 3vh auto;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
</style>
